<template>
  <div class="around-chain">
    <div class="before">
      <div class="chain-area" 
        :class="beforeLen < 3 ? 'center' : beforeLen > 2 ? 'top-7' : ''">
        <div class="item" v-for="(v, i) in before" :key="i">
          <!-- :class="beforeLen > 0 ? 'top-48' : ''"  -->
          <div class="ver-line right-20"
            v-if="i!==beforeLen-1"></div>
          <div class="left rel-line s-arrow"></div>
          <div class="main" @click="getTheChainInfo(v)">
            <div class="title">{{v.name}}</div>
            <div class="main-info">
              <div class="main-li" v-for="vv in v.children" :key="vv.key" >
                <span class="ml-pre">{{vv.key}}</span>
                <span>{{vv.value}}</span>
              </div>
            </div>
          </div>
          <div class="right rel-line"></div>
        </div>
      </div>
    </div>
    
    <div class="current chain-area center">
      <div class="item">
        <div class="left rel-line s-arrow"></div>
        <div class="main" @click="getTheChainInfo(v)">
          <div class="title">{{current[0].name}}</div>
          <div class="main-info">
            <div class="main-li">
              <span class="ml-pre">{{current[0].children[0].key}}</span>
              <span>{{current[0].children[0].value}}</span>
            </div>
          </div>
        </div>
        <div class="right rel-line"></div>
      </div>
    </div>
    
    <div class="after">
      <div class="chain-area" 
        :class="afterLen < 3 ? 'center' : afterLen > 2 ? 'top-7' : ''">
        <div class="item" v-for="(v, i) in after" :key="i">
          <!-- :class="afterLen === 3 ? 'top-48' : ''"  -->
          <div class="ver-line left-20"
            v-if="i!==afterLen-1"></div>
          <div class="left rel-line s-arrow"></div>
          <div class="main" @click="getTheChainInfo(v)">
            <div class="title">{{v.name}}</div>
            <div class="main-info">
              <div class="main-li" v-for="vv in v.children" :key="vv.key" >
                <span class="ml-pre">{{vv.key}}:</span>
                <span>{{vv.value}}</span>
              </div>
            </div>
          </div>
          <div class="right rel-line a-arrow"></div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  props: {
    before: {
      type: Array,
      default() {
        return []
      }
    },
    current: {
      type: Array,
    },
    after: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data () {
    return {
    }
  },
  computed: {
    beforeLen() {
      return this.before.length
    },
    afterLen() {
      return this.after.length
    }
  },
  methods: {
    getTheChainInfo(v) {
      this.$emit('getTheChainInfo', v)
    }
  }
}
</script>
 
<style scoped lang="scss">
  ::-webkit-scrollbar-track-piece {
      // background-color: #fff; /*滚动条的背景颜色*/
      -webkit-border-radius: 0; /*滚动条的圆角宽度*/
  }
  ::-webkit-scrollbar {
      width: 0px; /*滚动条的宽度*/
      height: 0px; /*滚动条的高度*/
  }
  ::-webkit-scrollbar-thumb:vertical { /*垂直滚动条的样式*/
      height: 50px;
      background-color: #eee;
      -webkit-border-radius: 4px;
      outline: 2px solid #fff;
      outline-offset: -2px;
      border: 2px solid #fff;
  }
  .center{
    justify-content: center;
  }
  .right-20{
    right: -20px;
  }
  .left-20{
    left: -20px;
  }
  .top-7{
    top: 7px;
  }
  .around-chain{
    width: 700px;
    height: 314px;
    display: flex;
    flex-flow: row nowrap;
    position: relative;
    overflow: hidden;
    .chain-area{
      .item{
        .left{
          left: -20px;
        }
        .right{
          right: -20px;
        }
      }
    }
    .verticle{
      width: 2px;
      background: #ffa053;
      position: relative;
    }
    .after,.before{
      display: flex;
      flex-flow: row nowrap;
    }
    .chain-area{
      width: 214px;
      height: 300px;
      // background: #eee;
      overflow: auto;
      margin: 7px 0px;
      padding: 0 20px;
      box-sizing: border-box;
      display: flex;
      flex-flow: column nowrap;
      // justify-content: center;
      align-items: center;
      position: relative;
      .item:last-child{
        margin-bottom: 0px;
        .rel-line::before{
          display: none;
        }
      }
      .item{
        width: 100%;
        height: 86px;
        margin-bottom: 14px;
        position: relative;
        .ver-line{
          position: absolute;
          top: 43px;
          width: 2px;
          height: 102px;
          z-index: 3;
          background: #ffa053;
        }
        .top-43{
          // top: 43px; // 4 2
        }
        .top-48{
          top: 48px; // 3
        }
        .rel-line{
          position: absolute;
          // width: 22px;
          // height: 2px;
          // background: #ffa053;
          width: 100px;
          height: 26px;
          background: url('./img/a_arrow.png') no-repeat;
          transform: scale(0.5, 0.5) translate(100px, -10px);
          top: 35px;
          z-index: 3;
        }
        .a-arrow{       
          transform: scale(0.5, 0.5) translate(100px, -10px);
          // background: url('./img/a_arrow.png') no-repeat;
        }
        .s-arrow{
          top: 35px;
          transform: scale(0.5, 0.5) translate(-100px, -10px);
          // background: url('./img/a_arrow.png') no-repeat;
        }
        // .after-left::before{
        //   content: '';
        //   position: absolute;
        //   top: 1px;
        //   left: 1px;
        //   z-index: 3;
        //   width: 2px;
        //   height: 105px;
        //   background: #ffa053;
        // }
        .main{
          position: relative;
          background: #fff;
          transition: all 0.5s;
          width: 100%;
          background: #fff;
          padding: 0px 12px;
          border: 2px solid rgba(0,0,0,0.20);
          box-shadow: 0 1px 2px 0 rgba(0,0,0,0.20);
          border-radius: 3px;
          transition: all 1s;
          .title{
            transition: all 0.5s;
            z-index: 3;
            width: 100%;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            font-weight: bold;
            border-bottom: 1px solid #eaeaea;
            margin-bottom: 5px;
          }
          .main-info{
            transition: all .5s;
            margin: 0 auto;
            height: 46px;
            .hidden {
              transition: all .5s;
              opacity: 0;
            }
            .main-li{
              margin-bottom: 5px;
              span{
                font-size: 12px;
                color: #333333;
                letter-spacing: 0.46px;
                display: inline-block;
              }
              .ml-pre{
                font-size: 13px;
                color: #A5A5A5;
                width: 50px;
                letter-spacing: 0.5px;
                text-align: right;
                margin-right: 5px;
              }
            }
          }
        }
        .main:hover{
          z-index: 10;
          border: 2px solid #3297FF;
          box-shadow: 0 5px 10px 0 rgba(0,0,0,0.33);
          .title{
            color: #3297FF;
          }
          .main-info{
            height: 109px;
            .hidden{
              opacity: 1;
            }
          }
        }
      }
    }
  }
</style>